<template>
	<view class="tabbar">
		<view class="tabbar__content" ref="tabbar__content">
			<view class="tabbar__content__item-wrapper">
				<view v-for="(item, index) in tabs" :key="index" class="tabbar-item"
					:class="{ selected: item.selected }" @tap="clickHandler(item)">
					<view class="tabbar-item__icon-wrapper">
						<view class="tabbar-item__icon">
							<image v-if="item.selected" :src="item.selectedIconPath" mode="aspectFit"></image>
							<image v-else :src="item.iconPath" mode="aspectFit"></image>
						</view>
					</view>
					<text class="tabbar-item__text">{{item.text}}</text>
				</view>
			</view>
			<safe-area-insets-bottom class="safe-area"></safe-area-insets-bottom>
		</view>
		<view class="tabbar__placeholder" :style="{
				height: placeholderHeight + 'px',
			}">
		</view>
	</view>
</template>

<script setup>
	uni.hideTabBar();
	import config from "@/pages.json";
	import {
		onMounted,
		ref,
		getCurrentInstance,
		computed,
		watch,
		onUnmounted,
	} from 'vue';
	import {
		useI18n
	} from "vue-i18n"

	const props = defineProps({
		activated: {
			type: Boolean,
			default: false
		}
	});

	const {
		t
	} = useI18n();

	const instance = getCurrentInstance();

	const placeholderHeight = ref(0);
	const tabbar__content = ref(null);
	const currentPage = ref(null);


	const tabs = computed(() => config.tabBar.list.map(item => ({
		...item,
		selected: currentPage.value === item.pagePath,
		text: t(item.text.substr(1, item.text.length - 2))
	})))

	const setPlaceholderHeight = async () => {
		await uni.$u.sleep(20);
		// #ifndef APP-NVUE
		const query = uni.createSelectorQuery().in(instance.proxy);
		query.select('.tabbar__content').boundingClientRect(({
			height = 50
		}) => {
			placeholderHeight.value = height;
		}).exec()
		// #endif

		// #ifdef APP-NVUE
		dom.getComponentRect(tabbar__content.value, (res) => {
			const {
				size
			} = res;
			placeholderHeight.value = size.height;
		})
		// #endif
	}

	const clickHandler = (tab) => {
		uni.$emit("tabbar-switch-tab", {
			to: tab.pagePath
		})
		uni.switchTab({
			url: `/${tab.pagePath}`
		})
	}

	const setCurrent = async () => {
		await uni.$u.sleep(20);
		currentPage.value = getCurrentPages()[0]?.route || null;
	}

	const onTabChange = ({
		to
	}) => {
		setCurrent();
	}

	onMounted(() => {
		uni.$on('tabbar-switch-tab', onTabChange);
		setPlaceholderHeight();
		setCurrent()
	})

	onUnmounted(() => {
		uni.$off('tabbar-switch-tab', onTabChange);
	})
</script>

<style lang="scss">
	$tabbar-item-text-color: #7C7C7C !default;
	$tabbar-item-text-bg-color: #132034 !default;
	$tabbar-item-text-selected-color: $u-primary !default;

	.tabbar {
		&__content {
			position: fixed;
			bottom: -4rpx;
			left: 0;
			right: 0;
			z-index: 9999;

			&__item-wrapper {
				@include flex(row);
				justify-content: space-around;
			}
		}

		.safe-area {
			padding-top: 6rpx;
			margin-top: -4rpx;
			background-color: $tabbar-item-text-bg-color;
		}

		&-item {
			@include flex(column);
			align-items: stretch;
			padding: 10rpx 0 14rpx;
			margin: 0 -4rpx;
			flex: 1;
			position: relative;
			background-color: $tabbar-item-text-bg-color;


			&__icon-wrapper {
				position: relative;
				height: 48rpx;
			}

			&__icon {
				@include flex(column);
				align-items: center;
				justify-content: center;
				position: absolute;
				border-radius: 50%;
				top: 0;
				left: 50%;
				width: 48rpx;
				height: 48rpx;
				margin-left: -24rpx;
				transition: all .2s;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}

			&__icon-wrapper+&__text {
				margin-top: 6rpx;
			}

			&__text {
				position: relative;
				z-index: 1;
				font-size: 20rpx;
				font-weight: normal;
				line-height: 20rpx;
				letter-spacing: 0em;
				text-align: center;
				color: $tabbar-item-text-color;
			}

			&.selected {
				background-color: rgba(0, 0, 0, 0);
				background-image: url('/static/tabbar/tabbar-bg.svg');
				background-size: auto 100%;
				background-position: center;
				.tabbar-item__icon {
					width: 72rpx;
					height: 72rpx;
					margin-left: -36rpx;
					background-color: $tabbar-item-text-selected-color;
					transform: translateY(-33rpx);

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}

				.tabbar-item__text {
					color: $tabbar-item-text-selected-color;
				}
			}
		}
	}
</style>